<template>
  <div class="goods-help bg-white flex-col">
    <div class="types flex-row justify-between">
      <div class="item flex-col" v-for="(item, index) in data" :key="`help${index}`" @tap="changeHelp(index)">
        <img :src="currentHelp === index ? item.imged : item.img" alt="" class="img" mode="aspectFit">
        <span class="text">{{item.name}}</span>
      </div>
    </div>
    <div class="content justify-center">
      <img :src="data[currentHelp].content" alt="" class="img" mode="aspectFit">
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        currentHelp: 0,
        data: [
          {
            name: '品牌保障',
            content: this.getImg('1-content'),
            img: this.getImg('1'),
            imged: this.getImg('1-ed'),
          },
          {
            name: '租赁流程',
            content: this.getImg('2-content'),
            img: this.getImg('2'),
            imged: this.getImg('2-ed'),
          },
          {
            name: '租赁计算',
            content: this.getImg('3-content'),
            img: this.getImg('3'),
            imged: this.getImg('3-ed'),
          },
          {
            name: '租赁方案',
            content: this.getImg('4-content'),
            img: this.getImg('4'),
            imged: this.getImg('4-ed'),
          }
        ]
      }
    },
    methods: {
      getImg(name) {
        return `https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/goodsDetail/goods-help-${name}.png`
      },
      changeHelp(index) {
        this.currentHelp = index
      }
    }
  }
</script>
<style lang="scss">
  .goods-help {
    width: 375px;
    height: 193px;
    margin-top: 4px;
    .types {
      width: 100%;
      padding: 0 21px;
      margin-top: 9px;
      margin-bottom: 12px;
      .item {
        .img {
          width: 40px;
          height: 40px;
        }
        .text {
          font-size: 11px;
          font-weight: 600;
          line-height: 16px;
          color: #0C0504;
          margin-top: 3px;
        }
      }
    }
    .content {
      width: 100%;
      .img {
        width: 355px;
        height: 110px;
      }
    }
  }
</style>
